<template>
  <div id="qxt"></div>
</template>

<script>
import { defineComponent, ref, computed, onMounted, nextTick } from "vue";
export default defineComponent({
  name: "Qxt",
});
</script>
<script setup>
// 引入
import * as echarts from "echarts";

// data
const qxtData = ref([
  {
    name: "00:00",
    num: 1.07,
  },
  {
    name: "06:00",
    num: 4.17,
  },
  {
    name: "12:00",
    num: 1.93,
  },
  {
    name: "18:00",
    num: 1.55,
  },
]);

// xAxis Data Comp
const xAxisDataComp = computed(() => {
  let retArr = [];
  qxtData.value.forEach((item) => {
    retArr.push(item.name);
  });
  return retArr;
});

// Line Data Comp
const lineDataComp = computed(() => {
  let retArr = [];
  qxtData.value.forEach((item) => {
    retArr.push(item.num);
  });
  return retArr;
});

// 图表初始化
const init = async () => {
  let dom = document.getElementById("qxt");
  let qxtChart = echarts.init(dom);

  // series中数据
  const seriesData = [1.07, 4.17, 1.93, 1.55];

  let option = {
    backgroundColor: "#020f23",
    color: ["rgba(36,107,253,1)"],
    tooltip: {
      trigger: "axis",
      textStyle: { color: "#fff", fontSize: 14 },
      className: "tooltip",
      order: "seriesDesc",
      renderMode: "html",
      backgroundColor: "#1b366a", // 设置背景颜色
      borderColor: "#1b366a", // 边框颜色
      formatter: (params) => {
        return `
            ${params[0].name}  <br/>
            ${params[0].marker}
            ${params[0].seriesName} :
            ${
              params[0].value == 0
                ? "-"
                : Number(params[0].value).toLocaleString()
            }万千瓦`;
      },
    },
    grid: {
      left: 12,
      right: 12,
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: "#fff",
          fontSize: 16,
          interval: 0, // 不隔断直接显示
        },
        axisLine: {
          show: true,
          lineStyle: {
            width: 2,
            color: "rgba(51, 74, 102, 1)",
          },
        },
        data: xAxisDataComp.value,
      },
    ],
    yAxis: [
      {
        type: "value",
        splitLine: {
          show: true,
          lineStyle: {
            type: [6, 8],
            dashOffset: 1,
            width: 3,
            color: "rgba(51, 74, 102, 1)",
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            width: 2,
            color: "rgba(51, 74, 102, 1)",
          },
        },
        axisLabel: {
          show: true,
          color: "#fff",
          fontSize: 16,
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "光伏出力负荷",
        type: "line",
        data: lineDataComp.value,
        symbol: "none",
        smooth: true,
        cursor: "default",
        width: 2,
        itemStyle: {
          normal: {
            // borderColor: "", //拐点边框颜色
            borderWidth: 10, //拐点边框大小，
            color: "rgba(36,107,253,1)",
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(36, 107, 253, 0.3)",
                },
                {
                  offset: 1,
                  color: "rgba(2, 154, 254, 0)",
                },
              ],
              false
            ),
            shadowColor: "rgba(36, 107, 253, 0)",
            shadowBlur: 2,
          },
        },
      },
    ],
  };
  qxtChart.setOption(option);
};

// nextTick异步
nextTick(() => {
  init();
});

// 初始化
onMounted(() => {});
</script>

<style lang="scss" scoped>
#qxt {
  width: 50vw;
  height: 50vh;
  background-color: black;
}
</style>
